<template>
  <div>
    <el-card>
      <el-form inline>
        <el-form-item label="分类名称:" class="mgb-0">
          <el-input v-model="fname"></el-input>
        </el-form-item>
        <el-form-item label="分类编码:" class="mgb-0">
          <el-input v-model="fnumber"></el-input>
        </el-form-item>
        <el-form-item class="mgb-0">
          <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
          <el-button type="success" icon="el-icon-refresh" @click="clearData"></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="openGroupAdd">新增</el-button>
      </div>
      <el-table border :data="dataList" v-loading="tableLoading">
        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column label="分类名称" prop="fname" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="分类编码" prop="fnumber" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="openGroupDetail(scope.row.fid)">详情</el-button>
            <el-button type="text" @click="openGroupEdit(scope.row.fid)">编辑</el-button>
            <el-button type="text" style="color: red" @click="deleteGroup(scope.row.fid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float:right; margin: 10px 0;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 15, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="totalRows">
      </el-pagination>
    </el-card>
    <!--新增-->
    <materialGroup-addEdit v-if="isShowGroupAddEdit" :groupId="groupId" @close="closeGroupAddEdit" @notRefresh="notRefresh"></materialGroup-addEdit>
    <!--详情-->
    <materialGroup-detail v-if="isShowGroupDetail" :groupId="groupId" @close="closeGroupDetail"></materialGroup-detail>
  </div>
</template>

<script>
import MaterialGroupApi from '@/api/material/MaterialGroupApi'
export default {
  name: 'xuMaterialGroup',
  components: {
     MaterialGroupAddEdit: resolve => require(['./components/materialGroup_addEdit'], resolve),
     MaterialGroupDetail: resolve => require(['./components/materialGroup_detail'], resolve),
   },
  data () {
    return {
      fname: '',
      fnumber: '',
      tableLoading: false,
      dataList: [],
      page: 1, //当前页面
      pageSize: 10, // 当前页数
      totalRows: 0, // 总条数
      groupId: 0,
      isShowGroupAddEdit: false,
      isShowGroupDetail: false,
    }
  },
  created () {
    this.getData()
  },
  methods: {
    //获取表格数据源
    getData () {
      let http = new MaterialGroupApi()
      this.tableLoading = true
      let data = {
        fname: this.fname,
        fnumber: this.fnumber,
        pageSize: this.pageSize,
        page: this.page,
      }
      http.queryListPage(data).then(res => {
        this.dataList = res.data.rows
        this.page = res.data.page
        this.pageSize = res.data.pageSize
        this.totalRows = res.data.totalRows
        this.tableLoading = false
      })
    },
    // 当前页码修改时
    handleCurrentChange (page) {
      this.page = page
      this.getData()
    },
    // 当前页数修改时
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.getData()
    },
    searchData () {
      this.page = 1
      this.getData()
    },
    clearData () {
      this.fname = ''
      this.fnumber = ''
    },
    //打开新增弹窗
    openGroupAdd () {
      this.isShowGroupAddEdit = true
    },
    //打开编辑弹窗
    openGroupEdit (id) {
      this.groupId = id
      this.isShowGroupAddEdit = true
    },
    //关闭新增编辑弹窗
    closeGroupAddEdit () {
      this.isShowGroupAddEdit = false
      this.groupId = ''
      this.getData()
    },
    notRefresh () {
      this.isShowGroupAddEdit = false
      this.groupId = ''
    },
    //打开详情弹窗
    openGroupDetail (id) {
      this.groupId = id
      this.isShowGroupDetail = true
    },
    //关闭详情弹窗
    closeGroupDetail () {
      this.groupId = ''
      this.isShowGroupDetail = false
    },
    //删除
    deleteGroup (groupId) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: `删除中，请耐心等待.....`,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let http = new MaterialGroupApi()
        http.delete({ "fid": groupId }).then(res => {
          this.$tie.showSuccess('删除成功')
          loading.close()
          this.getData()
        }).catch(e => {
          loading.close()
        })
      }).catch(() => {
      })
    },
  },
}
</script>

<style scoped>
</style>
